<template>
	<el-table :data="dataList" height="250" style="width: 100%" class="spot-custom-table" :border="false">
		<el-table-column prop="coin" label="交易对">
			<template #default="scope">
				<div class="flex items-center">
					<img src="/transaction/spot/collect-true.svg" v-if="scope.row.collect">
					<img src="/transaction/spot/collect-grey.svg" v-else>
					<p  class="text-12px ml-6px">{{ scope.row.coin }}</p>
				</div>
			</template>
		</el-table-column>	
		<el-table-column prop="price" label="最新价" sortable align="right">
			<template #default="scope">
				<div class="text-12px">
					<p>{{ scope.row.price }}</p>
				</div>
			</template>
		</el-table-column>
		<el-table-column prop="rate" label="涨跌幅" sortable 
		align="right">
			<template #default="scope">
				<div class="text-12px">
					<p :class="{'text-#F34E5F':scope.row.rate<0,'text-#07B175':!(scope.row.rate<0)}">{{ scope.row.rate }}%</p>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>
<script lang="ts" setup>
const dataList = ref<any[]>([
	{
		collect: true,
		coin: 'BTC/USDT',
		price: '1.336',
		rate: '-2.77',
	},
	{
		collect: true,
		coin: 'BTC/USDT',
		price: '1.336',
		rate: '-2.77',
	},
	{
		collect: true,
		coin: 'BTC/USDT',
		price: '1.336',
		rate: '-2.77',
	},
	{
		collect: true,
		coin: 'BTC/USDT',
		price: '1.336',
		rate: '-2.77',
	},
	{
		collect: false,
		coin: 'BTC/USDT',
		price: '1.34',
		rate: '+2.77',
	},
	{
		collect: false,
		coin: 'BTC/USDT',
		price: '1.336',
		rate: '+2.77',
	}
])
</script>
<style lang="scss" scoped>
.spot-custom-table{
	--el-bg-color:#181A20;
	color:#fff;
	font-size:12px;
	--el-table-header-text-color:#fff;
	--el-table-row-hover-bg-color:#101215;
	--el-table-border:none;
	--el-table-border-color:none;
}
</style>
